<template>
	<view class="leisurely-box solid-bottom" v-if="order.orderId">

		<view class="leisurely  text-grey" 
			@click.stop="jumpLeisurely"
		>
			<view class="top flex">
				<view class="shop-warp">
					<view class="avatar-warp">
						<image class="avatar" mode="aspectFill" 
							:src="order.headurl"></image> 
					</view>
					<view class="nickname">{{order.nickname}}</view>
					<view class="cuIcon-right text-gray"></view>
				</view>
				<view class="text-red margin-right"
					v-if="order.refundStatus==0 || order.refundStatus==5"
				>{{orderStatus[order.orderStatus]}}</view>
				<view class="text-red margin-right"
					v-else
				>{{refundStatus[order.refundStatus]}}</view>
				
				
			</view>
			
			
			<!-- 二手剧本 -->
			<view class="scen-group solid-bottom">
				<view class="scen2  text-gray">
					<view class="scen-img">
						<image :src="order.productIcon" 
							mode="aspectFill"></image>
					</view>
					<view class="scen-info">
						<view class="scen-info-title">
							<text class="title">{{order.scenName}}</text>
							<text  class='cu-tag bg-cyan round sm'>{{order.scenNum}}人本</text>
						</view>
						<view class="publisher">发行商: {{order.scriptPublisher}}</view>
						<view class="text-price">{{order.productDiscountPrice}}</view>
					</view>
					<view class="num"><text class="text-xs">x</text>1</view>
				</view>
			</view>
			
			<view class="total">
				共1件商品，合计:{{order.orderAmount}}（含运费{{order.productTransportCosts}},第三方鉴定服务费{{order.verifyPayable}}）
			</view>
			
			<view class="btn-group">
				<view v-if="mystatus==1">
					<button class="line-cyan cu-btn round margin-xs"
						@click.stop="confirmContact"
					>联系买家</button>
					
					<button class="line-cyan cu-btn round margin-xs"
						v-if="order.refundStatus != 0"
						@click.stop="refundDetails"
					>售后详情</button>
					
					<button class="bg-cyan cu-btn round margin-xs"
						v-if="order.orderStatus==2&& order.refundStatus== 0"
						@click.stop="confirmDelivery"
					>确认发货</button>
				</view>
				
				<view v-if="mystatus==2">
					
					<button class="line-cyan cu-btn round margin-xs"
						@click.stop="confirmContact"
					>联系卖家</button>
					
					
					<button class="line-cyan cu-btn round margin-xs"
						v-if="isAftermarket"
						
						@click.stop="confirmAftermarket"
					>申请售后</button>
					
					<button class="line-cyan cu-btn round margin-xs"
						v-if="order.refundStatus != 0"
						@click.stop="refundDetails"
					>售后详情</button>
					
					<button class="bg-cyan cu-btn round margin-xs"
						v-if="(order.verifyPayable==0 && order.orderStatus == 3) || 
						(order.verifyPayable!=0 && order.orderStatus == 5)"
						@click.stop="confirmReceipt"
					>确认收货</button>
				</view>
				
				
			</view>
		</view>
	</view>
</template>

<script>
	import { orderStatus, refundStatus } from '@/models/enum.js';
	
	export default {
		name: 'Viewleisurely',
		data(){
			return {
				orderStatus: orderStatus,
				refundStatus: refundStatus
			}
		},
		props: {
			order: {
				type: Object,
				default: () => {
					return {}
				}
			},
			mystatus: {
				type: Number,
				default: 0
			},
		},
		computed:{
			isAftermarket() {
				let price = ''
				if(this.order.refundStatus!=0) {
					return false
				}
				if(this.order.verifyPayable==0){
					return (this.order.orderStatus==2 || this.order.orderStatus==3)
				}else{
					return this.order.orderStatus==2
				}
			}
		},
		methods:{
			jumpLeisurely() {
				
				this.$jumpPages('orderIdleDetail', {
					orderId: this.order.orderId,
					identity: this.mystatus>=2?'B': 'S'
				})
			},
			confirmDelivery() {
				this.$emit('confirmDelivery', this.order.orderId);
			},
			
			confirmReceipt() {
				this.$emit('confirmReceipt', this.order.orderId);
			},
			
			confirmContact() {
				this.$emit('confirmContact', this.order.otherName);
			},
			
			confirmAftermarket() {
				// this.$emit('confirmAftermarket', this.order.orderId);
				this.selectOrder()
				this.$mTool.showModal({
					title: '提示',
					content: '是否要申请当前闲本的退款？',
					success: res => {
						if (res.confirm) {
							this.$jumpPages('orderTypeRefund')
						}
					}
				})
			},
			refundDetails() {
				this.selectOrder()
				this.$jumpPages('orderRefundDetail')
			},
			selectOrder() {
				let  selectOrder = {
					...this.order,
					identity: this.mystatus>=2?'B': 'S'
				}
				this.$store.commit('setStateAttr', {
					key: 'selectOrder',
					val: selectOrder
				}) 
			}
		}
	}
</script>

<style lang="scss" scoped>
	.leisurely-box{
		background-color: #FFFFFF;
		position: relative;

		.leisurely{
			.top{
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
			.shop-warp{
				display: flex;
				align-items: center;
				padding: 30rpx;
				.avatar-warp{
					width: 60rpx;
					height: 60rpx;
					margin-right: 22rpx;
					border-radius: 50%;
					background: #F5F5F5;
				}
				.avatar{
					width: 60rpx;
					height: 60rpx;
					border-radius: 50%;
				}
				.nickname{
					font-size: 30rpx;
					color: #000000;
					margin-right: 22rpx;
				}
			}
			.scen-group{
				background-color: #F8FAFF;
				padding: 30rpx;
			}
			.scen2{
				display: flex;
				position: relative;
				padding-bottom: 20rpx;
				
				.scen-img{
					width: 120rpx;
					height: 165rpx;
					-webkit-flex-shrink: 0;
					flex-shrink: 0;
					position: relative;
					background: #F5F5F5;
					border-radius: 10rpx;
					image{
						border-radius: 10rpx;
						width: 120rpx;
						height: 165rpx;
					}
				}
				.scen-info{
					display: flex;
					flex-direction: column;
					flex: 1;
					overflow: hidden;
					position: relative;
					padding-left: 15px;
					font-size: 14px;
				}
				.scen-info-title{
					line-height: 20px;
					margin-bottom: 24rpx;
					.title{
						font-size: 36rpx;
						color: #000;
						font-weight: 700;
						margin-right: 27rpx;
					}
				}
				.publisher{
					margin-bottom: 30rpx;
					font-size: 24rpx;
				}
				.text-price{
					color: #E42C2C;
					font-size: 32rpx;
					font-weight: 700;
				}
			}
			
			.total{
				font-size: 24rpx;
				color: #909090;
				padding: 20rpx 30rpx;
				text-align: right;
			}
			.btn-group{
				display: flex;
				align-items: center;
				justify-content: flex-end;
				flex-wrap: wrap;
				padding: 10rpx;
			}
		}
		
	}
</style>
